<!DOCTYPE html>
<html>
<head>
    <title>Tabbed Content</title>
    <script src="tabcontent.js" type="text/javascript"></script>
    <link href="template2/tabcontent.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:#F6F9FC; font-family:Arial;">
    <div style="width: 500px; margin: 0 auto; padding: 120px 0 40px;">
        <ul class="tabs" data-persist="true">
            <li><a href="#view1">Lorem</a></li>
            <li><a href="#view2">Using other templates</a></li>
            <li><a href="#view3">Advanced</a></li>
        </ul>
        <div class="tabcontents">
            <div id="view1">
                <b>Lorem Issum</b>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                
            </div>
            <div id="view2">
                <b>Switch to other templates</b>
                <p>Open this page with Notepad, and update the CSS link to:</P>
                <p>template1 ~ 6.</p>                
            </div>
            <div id="view3">
                <b>Advanced</b>
                <p>We have an advanced version, <a href="http://www.menucool.com/jquery-tabs">McTabs - jQuery Tabs</a>, that is the most feature-rich Tabs.</p>
                <ul>
                    <li>Ajax content</li>
                    <li>Smooth transitional effect</li>
                    <li>Auto advance</li>
                    <li>Bookmark support: select a tab via bookmark anchor</li>
                    <li>URL support: a hash id in the URL can select a tab</li>
                    <li>Select tabs by mouse over</li>
                    <li>... and more</li>                    
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
